<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>新增表单控件</title>
</head>
<body>
    <form>
        <table>
            <tr>
                <td>Email：</td>
                <td><input type="email" multiple></td>
            </tr>
            <tr>
                <td>URL：</td>
                <td><input type="url" required></td>
            </tr>
            <tr>
                <td>Tel：</td>

                <td><input type="tel" placeholder="请输入电话" pattern="\d{7,11}" oninvalid="this.setCustomValidity('请输入数字')" oninput="this.setCustomValidity('')"></td>
            </tr>
            <tr>
                <td>Search：</td>
                <td><input type="search" autofocus></td>
            </tr>
            <tr>
                <td>Range：</td>
                <td><input type="range" max="100" min="0" value="50" step="1" oninput="console.log(this.value)"></td>
            </tr>
            <tr>
                <td>Number：</td>
                <td><input type="number" max="10" min="0" value="4" step="2"></td>
            </tr>
            <tr>
                <td>Color：</td>
                <td><input type="color" value="#ffffff"></td>
            </tr>
            <tr>
                <td>datetime-local：</td>
                <td><input type="datetime-local"></td>
            </tr>
            <tr>
                <td>time：</td>
                <td><input type="time"></td>
            </tr>
            <tr>
                <td>date</td>
                <td><input type="date"></td>
            </tr>
            <tr>
                <td>month</td>
                <td><input type="month"></td>
            </tr>
            <tr>
                <td>week</td>
                <td><input type="week"></td>
            </tr>
            <tr>
                <td>password</td>
                <td><input type="password" placeholder="请输入密码"></td>
            </tr>
            <tr>
                <td>list属性</td>
                <td>
                    <input type="text" list="dl1">
                    <datalist id="dl1">
                        <option value="选项1">
                        <option value="选项2">
                    </datalist>
                </td>
            </tr>
            <tr>
                <td colspan="2"><input type="submit"></td>
            </tr>
        </table>
    </form>
</body>
</html>
